<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/structAdmin.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:define name="content">

        <p:commandButton   value="Ayuda" styleClass=" btnhelp" onclick="dlgm.show();" type="button" />  
        <p:panel header="Gestionar Producto" style="border: 0">

            <h:form id="form">
                <p:panel header="Información Básica" id="panel" style="margin: 20px 0px 5px 0px;" >

                    <p:messages id="msgs" globalOnly="true" closable="true" />

                    <h:panelGrid columns="4" cellpadding="5"  >

                        <h:outputText value="Nombre: *"  />
                        <p:inputText  value="#{productoBean.producto.descripcion}" required="true" />

                        <h:outputText value="Precio: *"  />
                        <pe:inputNumber  maxlength="6" maxValue="1000000"  decimalSeparator="none" value="#{productoBean.producto.precio}" required="true" />

                        <h:outputText value="Cantidad: *"  />
                        <pe:inputNumber maxlength="10" maxValue="9999999999"  value="#{productoBean.producto.cantidad}" required="true" />

                        <h:outputText value="Puntos: *"  />
                        <pe:inputNumber  maxlength="3" maxValue="100"  decimalSeparator="none" value="#{productoBean.producto.puntos}" required="true" />

                        <h:outputText value="Unidad de Medida: *" />
                        <p:selectOneMenu id="umed"  rendered="true" value="#{productoBean.producto.umed}" label="umed" requiredMessage="No puedes dejar este campo sin selección." required="true" >
                            <f:selectItem itemLabel="Seleccione..." itemValue="" />
                            <f:selectItems value="#{productoBean.unidadeDeMedidas()}" />
                        </p:selectOneMenu> 

                        <h:outputLabel for="tipo" value="Tipo de Producto: * " />
                        <p:selectOneMenu required="true" requiredMessage="No puedes dejar este campo sin selección."  label="tipo" id="tipo" value="#{productoBean.producto.codTipoProducto}" converter="TipoProductoConvertor" >
                            <f:selectItem itemLabel="Seleccione..." value="#{null}"   />
                            <f:selectItems value="#{tipoProductoBean.obtenerTipoProductos()}"  />
                        </p:selectOneMenu> 

                    </h:panelGrid> 

                </p:panel>

                <p:commandButton styleClass="buttonMain" style="margin: 0px 15px 0px 0px;" value="Guardar" icon="ui-icon-disk" update="form" actionListener="#{productoBean.saveAction()}" />
                <p:commandButton styleClass="buttonSecundary" value="Cancelar" icon="ui-icon-close" update=":form:panel" ajax="true" process="@this" actionListener="#{productoBean.cancelAction()}" />

                <p:dataTable id="dataTable" var="producto"  style="margin: 20px 0px 5px 0px;" 
                             value="#{productoBean.obtenerProductos()}"  
                             paginator="true" rows="20"  
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,15,20,25,30" 
                             paginatorPosition="bottom">  
                    <f:facet name="header">  
                        Productos Registrados
                    </f:facet>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Tipo de Producto" />  
                        </f:facet>  
                        <h:outputText value="#{producto.codTipoProducto}" />  
                    </p:column>    

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Nombre" />  
                        </f:facet>  
                        <h:outputText value="#{producto.descripcion}" />  
                    </p:column>    

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Precio" />  
                        </f:facet>  
                        <h:outputText value="#{producto.precio}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Cantidad" />  
                        </f:facet>  
                        <h:outputText value="#{producto.cantidad}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Unidad de Medida" />  
                        </f:facet>  
                        <h:outputText value="#{producto.umed}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Puntos" />  
                        </f:facet>  
                        <h:outputText value="#{producto.puntos}" />  
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Estado" />  
                        </f:facet>  
                        <h:outputText value="#{producto.estado}" />  
                    </p:column>  

                    <p:column headerText="Acción">
                        <p:commandLink  value="  Inactivar" update="dataTable" ajax="true" process="@this" actionListener="#{productoBean.inactivar(producto)}" rendered="#{producto.estado eq 'Activo'}">                            
                        </p:commandLink>

                        <p:commandLink value="  Activar" update="dataTable" ajax="true" process="@this" actionListener="#{productoBean.activar(producto)}" rendered="#{producto.estado eq 'Inactivo'}">                            
                        </p:commandLink>
                    </p:column>

                    <p:column headerText="Acción" >
                        <p:commandLink styleClass="action-edit" title="Editar" ajax="true" action="#{productoBean.setStored(true)}"  process="@this" update=":form:panel" >
                            <f:setPropertyActionListener value="#{producto}" target="#{productoBean.producto}" />
                            <h:graphicImage url="../../resources/images/edit-icon.png" styleClass="icon" />
                        </p:commandLink>

                        <p:commandLink title="Eliminar"  ajax="true" action="#{productoBean.setStored(true)}"  process="@this" update=":form:panel" >
                            <f:setPropertyActionListener value="#{producto}" target="#{productoBean.producto}" />
                            <h:graphicImage url="../../resources/images/delete-icon.png" styleClass="icon" />
                        </p:commandLink>
                    </p:column>

                </p:dataTable>  
            </h:form>  

            <p:dialog id="dialog" header="Ayuda" widgetVar="dlgm" draggable="false" closable="true" appendToBody="true" visible="false" modal="true" showEffect="fade" hideEffect="fade"  resizable="false">  

                <h:form>
                    <h:panelGrid columns="2">

                        <p style="text-align: justify">

                            * Para completar el registro de producto usted debe seleccionar un Tipo Producto previamente ingresado. <br />Si no lo ha realizado presione clic en el panel lateral Gestionar Tipo Producto.
                            <br />
                            * A continuación ingrese los datos necesarios para la creación de una producto (en este caso todos) y seleccione la opción Guardar o Cancelar.
                            <br />
                            * Si selecciona la opción guardar y los datos son correctos se guardara exitosamente el producto y se mostrara en pantalla
                            <br />
                            * Si selecciona la opción cancelar se borraran los datos anteriormente ingresados
                        </p>
                    </h:panelGrid>
                    <br/> 

                    <p:commandButton value="Aceptar" styleClass="buttonMain"  oncomplete="dlgm.hide();" />
                </h:form>

            </p:dialog>


        </p:panel>


    </ui:define>
</ui:composition>
